.root {
  padding: 0.5em 0;
}

.query-list {
  font-style: italic;
  margin-top: 0.25em;

  & > *::before {
    content: '... ';
  }
}

.progress {
  position: relative;
  height: 6px;
  background-color: rgb(180, 220, 255);
  overflow: hidden;
}

.indeterminate {
  background-color: rgb(24, 144, 255);

  &::before {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
  }

  &::after {
    content: '';
    position: absolute;
    background-color: rgb(80, 170, 255);
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation-delay: 1.15s;
  }
}

@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}

@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}
